<template>
    <div>
        <div class="tac">
            <el-menu
              default-active="1"
              class="el-menu-vertical-demo">
              <div class="menu_item">
                  <el-menu-item v-for="(item,index) in iconList" :key="index" :index="(index+1).toString()" @click="checkPage(index)">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{item.name}}</span>
                  </el-menu-item>
              </div>
            </el-menu>
        </div>

         <div class="drawer">
           <ul class="drawer_page" :id="checkMenu">
              <li class="mCustomScrollBox" :id="'li'+index" v-for="(item,index) in iconList" :key="index" :class="index == 0 && onePage == true?'menu0':''">
                 <vue-scroll :ops="ops" style="width:100%;height: calc(100vh - 60px);" >
                   <div class="scroll" v-if="item.type =='input'">
                      <div 
                        v-for="(val,i) in item.list" 
                        :id="i+'input'" 
                        :key="i" 
                        class="svgBody svgBody_input" 
                        style="height: auto;text-align: center;forwhite-space:nowrap ;" 
                        @mousemove="mousemove($event)">
                        <img class="xzIcon" src="./xuanzhuan.png" alt="" style="visibility:hidden; position: absolute;width: 16px;height: 16px;top: -25px;left: 50%;margin-left: -8px;z-index: 3000;" >
                        {{val.label}}</div>
                   </div>
                   <div class="scroll" v-else-if="item.type =='function'">
                      <div 
                        v-for="(val,i) in item.list" 
                        :id="i+'function'" 
                        :key="i" 
                        class="svgBody svgBody_function" 
                        style="height: auto;text-align: center;forwhite-space:nowrap ;" 
                        @mousemove="mousemove($event)">
                        <img class="xzIcon" src="./xuanzhuan.png" alt="" style="visibility:hidden; position: absolute;width: 16px;height: 16px;top: -25px;left: 50%;margin-left: -8px;z-index: 3000;" >
                        <i style="font-size: 20px;" :class="val.icon"></i>
                        {{val.name}}
                        </div>
                   </div>
                   <div class="scroll" v-else>
                      <div 
                        v-for="(val,i) in item.list" 
                        :id="i+'dropBody'" 
                        :key="i" 
                        class="svgBody" 
                        style="width: 100px;height: 100px;"
                        :style="{backgroundImage: 'url(' + (val.iconUrl? val.iconUrl : 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2186027507,2105304578&fm=26&gp=0.jpg') + ')', backgroundSize:'contain'}" 
                        @mousemove="mousemove($event)">
                        <img class="xzIcon" src="./xuanzhuan.png" alt="" style="visibility:hidden; position: absolute;width: 16px;height: 16px;top: -25px;left: 50%;margin-left: -8px;z-index: 3000;" >
                      </div>
                   </div>
                 </vue-scroll>
               </li>
           </ul>
         </div>

          <!-- 天气组件 -->
              <!-- <div 
                :id="weather.id"  
                class="svgBody weather selected_dom" 
                style="width: 100px;height: 100px;display:none; text-align: left;"
                @mousemove="mousemove($event)">
                <img class="xzIcon" src="./xuanzhuan.png" alt="" style="; position: absolute;width: 16px;height: 16px;top: -25px;left: 50%;margin-left: -8px;z-index: 3000;" >
                <div style="font-size: 16px;">{{weather.address}}</div> 
                <div style="font-size: 20px;">{{weather.temp}}</div> 
                
                <img class="icon2" src="" alt="">
                <div style="position: absolute;bottom:5px">{{weather.weather}}</div>
              </div> -->
    </div>
</template>

<script>
import { InputNumber } from 'element-ui'
import axios from '@/utils/axios.js'
import Bus from '@/utils/bus.js'
export default {
    data() {
	    return {
          setBox:[],
          weatherBox:[],
          weather:{},
          endData:{
			    	left:0,
			    	top:0
			    },
          formData:{},
          itemBtnsILeft:'1',
          onePage:true,
          iconList:[],
          checkMenu:'',
          mouseDiv:'',
          ops: {
				  	vuescroll: {},
				  	scrollPanel: {},
				  	rail: {
				  		keepShow: true
				  	},
				  	bar: {
				  		hoverStyle: true,
				  		onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
				  		background: "#D6D8DD", //滚动条颜色
				  		opacity: 0.9, //滚动条透明度
				  		"overflow-x": "hidden"
				  	}
				  },
        }
    },
    created(){
      this.queryIconList()
      this.getWeather()
    },
    mounted(){
      Bus.$on('itemBtnsI', (data) => {
        this.itemBtnsILeft = data
      })
       Bus.$on('end', (data) => {
        this.endData = data
      })
      Bus.$on('delDom', (data) => {
        this.setBox.forEach((item,index) =>{
          if(item.id == data){
            clearInterval(item.set)
            this.setBox.splice(index,1)
          }
        })
        console.log(this.setBox);
      })
      Bus.$on('city', (data) => {
        if(data){
          this.getWeather(data)
        }
      })
    },
    methods:{
      queryIconList(){
		  	this.$request.get(this.$api.queryIconList)
		  		.then(res=>{
		  			if(res.code == 200){
              let arr = []
              res.data.forEach(item =>{
                if(item.name){
                  arr.push(item)
                }
              }) 
              if(arr.length >0){
                this.iconList = [
                  {name:'文本测试',
                  type:'input',
                  list:[
                    {id:0,label:'变量值', value:'1'},
                    {id:0,label:'指示灯', value:'2'},]
                  },
                  {name:'功能组件',
                  type:'function',
                  list:[
                    {id:0,name:'时间', icon:'el-icon-time' },
                    {id:1,name:'动态时间', icon:'el-icon-alarm-clock'},
                    {id:2,name:'天气', icon:'el-icon-lightning'},
                    ]
                  },
                  {name:'图片测试',
                  list:[
                    {iconUrl:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2186027507,2105304578&fm=26&gp=0.jpg'},
                    {iconUrl:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3974573141,4163359152&fm=26&gp=0.jpg'},
                    {iconUrl:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2714193875,2521036677&fm=26&gp=0.jpg'},
                    {iconUrl:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2597734236,1850198783&fm=26&gp=0.jpg'},
                  ]}
                ]
                // this.iconList = arr
              }
		  			}
		  		})
		  },
      //天气组件接口
      getWeather(data){
        let val = ''
        if(data){
          val = data.text
        }else{
          val = '重庆'
        }
        this.$request.get(this.$api.getWeatherByAddress, {
						address:val,
					}).then(res=>{
						if(res.code == 200){
              let rdata = {}
              rdata = {
                address:res.data.city,
                data:res.data.date,
                temp:res.data.list[0].temp,
                icon1:res.data.list[0].icon1,
                icon2:res.data.list[0].icon2,
                weather:res.data.list[0].weather
              }
              this.weather = rdata

              //更改已存在天气的数据
              if(this.weatherBox.length > 0){
                this.weatherBox.forEach(item =>{
                  if(item.id = data.id){
                    item = $.extend(true,{},this.weather); //jq深拷贝
                    item.id = data.id
                    let img = $('#' + data.id + '').children(".xzIcon")
                    $('#' + data.id + '').text(item.data+'\n'+item.address+'\t'+item.weather+'\n'+item.temp+'\n')
                    if(item.icon1 == item.icon2){
                      $('#' + data.id + '').append('<img style="display:inline-block; width:30px; height:30px;" src="'+ item.icon1 +'" alt="">')
                    }else{
                      $('#' + data.id + '').append('<img style="display:inline-block; width:30px; height:30px;" src="'+ item.icon1 +'" alt="">')
                      $('#' + data.id + '').append('<span>→</span>')
                      $('#' + data.id + '').append('<img style="display:inline-block; width:30px; height:30px;" src="'+ item.icon2 +'" alt="">')
                    }
                    $('#' + data.id + '').append(img) 
                  }
                })
              }
						}
					})
      },
      //添加动画id
      checkPage(num){
        this.onePage = false
        this.iconList.forEach((item,index) =>{
            if(num == index){
              $("#li"+num.toString()).css("margin-left","240px")
            }else{
               $("#li"+index.toString()).css("margin-left","0")
            }
        })
      },
      //生成随机数
      getRandom(n){
        var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
        var res = "";
        for(var i = 0; i < n ; i ++) {
            var id = Math.ceil(Math.random()*35);
            res += chars[id];
        }
        return res;
      },
      //给个位数月份加0
      check(val) {
      	if (val < 10) {
      		return ("0" + val);
      	} 
      	else {
      		return (val);
      	}
      },
      //时钟
      displayTime() {
    		var date = new Date();
    		var year = date.getFullYear();
    		var month = date.getMonth() + 1;
    		var day = date.getDate();
    		var hour = date.getHours();
    		var minutes = date.getMinutes();
    		var second = date.getSeconds();
    		var timestr = year + "年" + month + "月" + day + "日  " + this.check(hour)
    				+ ":" + this.check(minutes) + ":" + this.check(second);
        return timestr
    	},
      //鼠标选中拖拽
      mousemove(e){
        let that = this
        // let start_width = 0
        if(that.itemBtnsILeft == '1' && $(e.target).parent().attr('class') == 'scroll'){
          $(e.target).draggable({
            cursor: 'move',
            disabled: false,
            helper: "clone",
            start: function(e,ui){
              let dragDom = $(e.target)[0]
              let random =  that.getRandom(5)
             $(dragDom).attr('id',random)
            },
            // drag: function (event, ui) { console.log("拖拽中"); },
            stop: function (e,ui) { 
              // console.log("拖拽结束"); 
              $(".xzIcon").css("visibility","hidden");
              $('.doc_canvas_cont').children(".svgBody").resizable({disabled: true }).removeClass('selected_dom')
              $('.doc_canvas_cont').children(".svgBody").children(".ui-resizable-handle").css("display", "none");
                let dragDom = $(e.target)[0]
                let dom = $(dragDom).clone();
                $('.doc_canvas_box').css("position", "relative");
                $(dom).css({'position':'absolute','left':(ui.position.left - that.endData.left+4 )+'px','top':(ui.position.top - that.endData.top -58)+'px'})

                if($(dom).text() != ''){
                  let img = $(dom).children(".xzIcon")
                  if($(dom).text().trim() == '动态时间'){
                    $(dom).text(that.displayTime())
                    let id = '1function'+$(dom).attr('id')
                    $(dom).attr('id',id)
                    $(dom).append(img)
                    that.setBox.push({
                      id:id,
                      set:setInterval(() => {
                        $(dom).text(that.displayTime())
                        $(dom).append(img)
                      }, 1000)
                    }) 
                    console.log(that.setBox);
                  }else if($(dom).text().trim() == '时间'){
                    let id = '0function'+$(dom).attr('id')
                    $(dom).attr('id',id)
                    $(dom).text(that.displayTime())
                    $(dom).append(img)  

                  }else if($(dom).text().trim() == '天气'){
                    let random =  $(dom).attr('id')
                    let id = '2function'+random
                    $(dom).attr('id',id)
                    that.weather.id = id
                    if(that.weatherBox.length ==1 && that.weatherBox[0].id == undefined){
                      that.weatherBox[0].id = id
                    }else{
                      that.weatherBox.push(that.weather)
                    }
                    console.log(that.weather,'weather');
                    $(dom).text(that.weather.data+'\n'+that.weather.address+'\t'+that.weather.weather+'\n'+that.weather.temp+'\n')
                    $(dom).css({'white-space':'pre-line','text-align':'left'})

                    if(that.weather.icon1 == that.weather.icon2){
                       $(dom).append('<img style="display:inline-block; width:30px; height:30px;" src="'+ that.weather.icon1 +'" alt="">')
                    }else{
                       $(dom).append('<img style="display:inline-block; width:30px; height:30px;" src="'+ that.weather.icon1 +'" alt="">')
                       $(dom).append('<span>→</span>')
                       $(dom).append('<img style="display:inline-block; width:30px; height:30px;" src="'+ that.weather.icon2 +'" alt="">')
                    }
                    $(dom).append(img) 

                    let b =$.extend(true,{},that.weather); //jq深拷贝
                    b.id = id
                    that.weatherBox.push(b)
                  }

                  let input = {}
                  input.text = $(dom).text().trim()
                  input.id = $(dom).attr('id');//1function标识为动态时间
                  input.color = $(dom).css('color')
                  Bus.$emit('isInput', input)//组件为文本标识
                  $(dom).appendTo(".doc_canvas_cont").draggable().addClass('selected_dom')
                }else{
                  $(dom).appendTo(".doc_canvas_cont").draggable().resizable({  
                  aspectRatio: true,
                  handles: "n, e, s, w, ne, se, sw, nw" ,
                  disabled: false,
                  start: function(e,ui){
                  },
                  stop: function (e,ui) {
				  		    }}).addClass('selected_dom')
                }
                $(".selected_dom").children(".xzIcon").css("visibility","visible");
                $(dom).draggable(false)
            }}
          )
        }
      },
    }
}
</script>

<style scoped>

.ui-draggable-dragging{
  position: fixed !important;
}
</style>

<style scoped="scoped" lang="scss">
.weather{
  border: 1px solid rgb(163, 163, 163);
  padding: 5px;
}
.xuanzhaunIcon{
  position: absolute;
	width: 16px;
	height: 16px;
	top: -25px;
	left: 50%;
  	margin-left: -8px;
    z-index: 3000;
}
.tac{
    // border-top:double 4px #e6e6e6;
    width:60px;
    position: fixed;
    display: flex;
    justify-content:flex-start;
    top: 60px;
    // top: 300px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2999 !important;
}
.menu_item .el-menu-item{
    min-width: 50px !important;
    height: 90px !important;
    padding: 5px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    i{
        font-size: 26px !important;
        margin: 0 auto;
    }
    span{
        line-height: 30px;
        text-align: center;
        font-size: 12px;
    }
}
.drawer{
    // border-top:double 4px #e6e6e6;
    position: fixed;
    // top: 300px;
    top: 60px;
    left: 59px;
    margin: auto;
    width: 240px;
    height: calc(100vh - 60px);
    text-align: start;
    font-family: Arial;
    color: #FFF;
    overflow: hidden;
    
    z-index: 2999;
}

.drawer ul {
    height: calc(100vh - 60px);
    padding: 0;
    // width: 220px;
    background: rgb(255, 255, 255);
    display: block;
    white-space: nowrap;
    // transition: all 0.5s;    
}

.drawer li {
    position: absolute;
    left: -240px;
    width: 240px;
    // float: left;
    height: calc(100vh - 60px);
    display: inline-block;
    list-style: none;
    line-height: 200px;
    font-size: 36px;  
    transition: all 0.5s;  
}

.menu0 {
  margin-left:240px;
}

#menu1 {
  margin-left: -480px;
}



.mCustomScrollBox{
    width: 240px;
    border-right: 1px solid #dfdfdf;
    .scroll{
      padding: 10px 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center; 
      
    }
    .svgBody{
      cursor: move;;
      margin: 5px;
      // background: #cecfcf;
      width: 100px;
      height: 100px;
      
    }
    .svgBody_input{
      font-size: 14px;
      line-height: 40px;
      color: #111111;
      border: 1px solid #e2e2e2;
    }
    .svgBody_function{
      padding-top: 10px;
      display: flex;
      flex-direction: column;
      font-size: 14px;
      line-height: 40px;
      color: #111111;
      border: 1px solid #e2e2e2;
    }

}

</style>